<template>
    <div class="login-container">
        <a-form v-if="type" ref="formRef" :model="formData" :rules="rules">
            <h1>登录</h1>
            <a-form-item label="用户名" name="username">
                <a-input v-model:value="formData.username" placeholder="请输入用户名" />
            </a-form-item>
            <a-form-item label="密码" name="password">
                <a-input v-model:value="formData.password" type="password" placeholder="请输入密码" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="goto">注册</a-button>
                <a-button type="primary" @click="handleLogin">登录</a-button>
            </a-form-item>
        </a-form>

        <a-form v-else ref="registerRef" :model="registerFormData" :rules="registerRules">
            <h1>注册</h1>
            <a-form-item label="用户名" name="username">
                <a-input v-model:value="registerFormData.username" placeholder="请输入用户名" />
            </a-form-item>
            <a-form-item label="性别" name="sex">
                <a-input v-model:value="registerFormData.sex" placeholder="请输入性别" />
            </a-form-item>
            <a-form-item label="年龄" name="age">
                <a-input v-model:value="registerFormData.age" placeholder="请输入年龄" />
            </a-form-item>
            <a-form-item label="密码" name="password">
                <a-input v-model:value="registerFormData.password" type="password" placeholder="请输入密码" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" @click="handleRegister">注册</a-button>
                <a-button type="primary" @click="goto">去登陆</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';

const type = ref(true)

const router = useRouter()

const formData = reactive({
    username: '',
    password: ''
})

const registerFormData = reactive({
    username: '',
    sex: '',
    age: '',
    password: ''
})

const formRef = ref(null)

const registerRef = ref(null)

const rules = {
    username: [
        { required: true, message: '请输入用户名' }
    ],
    password: [
        { required: true, message: '请输入密码' }
    ]
}

const registerRules = {
    username: [
        { required: true, message: '请输入用户名' }
    ],
    password: [
        { required: true, message: '请输入密码' }
    ]
}

// 模拟数据库数据
const dbData = ref({
    username: 'admin',
    password: '123456'
})

const handleLogin = () => {
    formRef.value.validate().then(() => {
        const list = JSON.parse(localStorage.getItem(table.value) || '[]')
        const index = list.findIndex(v => v.userName == formData.username && v.password == formData.password)
        if (index >= 0) {
            localStorage.setItem("loginUser", JSON.stringify(formData))
            message.info('登录成功')
            router.push("/index")
        } else {
            message.error('登录失败')
        }

        // if (formData.username === dbData.value.username && formData.password === dbData.value.password) {
        //     console.log('登录成功')
        // } else {
        //     message.error('登录失败')
        //     console.log('登录失败')
        // }
    }).catch(() => {
        console.log('验证失败')
    })

}

const goto = () => {
    type.value = !type.value
}

const handleRegister = () => {
    registerRef.value.validate().then(() => {
        saveData(registerFormData.username, registerFormData.sex, registerFormData.age, registerFormData.password)
    }).catch(() => {
        console.log('验证失败')
    })
}

const table = ref("user")

const saveData = (userName, sex, age, password) => {

    const list = JSON.parse(localStorage.getItem(table.value) || '[]')

    const index = list.findIndex(v => v.userName == userName)

    if (index >= 0) {
        message.error('账号已存在，请更换')
        return
    }

    // localStorage.getItem(table.value) ? JSON.parse(localStorage.getItem(table.value)) : []

    list.push({
        userName: userName,
        sex: sex,
        age: age,
        password: password
    })

    localStorage.setItem(table.value, JSON.stringify(list))
    message.info('注册成功')
}
</script>

<style scoped>
.login-container {
    background-color: lightgray;
    border-radius: 10px;
    padding: 10px;
}
</style>